<template>
  <div @mouseup="clickPoint" style="background-color: rgb(58,58,58);overflow: hidden;padding-top: 10px;">
    <el-row style="overflow: hidden;">
      <el-col :span="18">
        <Map2DEchart :mapData="provinceMapData" :dateTime="dateTime"></Map2DEchart>
      </el-col>
      <el-col :span="6" style="padding: 0 10px;">
        <!-- 这里是动画效果翻页 -->
        <div style="width: 100vw;height: 20vh;margin-top: 150px;color:#fff">
          <section class="container">
            <div id="card" :class="{ flipped: isBack }">
              <!--<figure class="front">1</figure>
              <figure class="back">2</figure>-->
              <figure class="front">
                <a href="#" @click="jumpCinema" style="color: white" v-if="showPointData !== null">
                  <i class="fa fa-trophy fa-2x" aria-hidden="true" style="color:rgb(255, 192, 0)"></i>&nbsp;<span style="font-size: 18px;color:rgb(255, 192, 0)">{{showPointData.rank}}</span>&nbsp;&nbsp;<span style="font-size: 16px">{{showPointData.name}}</span>
                  <br/>
                  <br/>
                  <span style="vertical-align: middle;font-size: 18px">票房:</span>&nbsp;<span style="vertical-align: middle;font-size: 24px;color:rgb(255, 192, 0);font-weight: bold">{{showPointData.boxoffice}}</span>&nbsp;&nbsp;
                  <span style="vertical-align: middle;font-size: 18px">人次:</span>&nbsp;<span style="vertical-align: middle;font-size: 24px;color:rgb(255, 192, 0);font-weight: bold">{{showPointData.tickets}}</span>&nbsp;&nbsp;
                  <span style="vertical-align: middle;font-size: 18px">场次:</span>&nbsp;<span style="vertical-align: middle;font-size: 24px;color:rgb(255, 192, 0);font-weight: bold">{{showPointData.rounds}}</span>
                </a>
              </figure>
              <figure class="back">
                <a href="#" @click="jumpCinema" style="color: white" v-if="showPointData !== null">
                  <i class="fa fa-trophy fa-2x" aria-hidden="true" style="color:rgb(255, 192, 0)"></i>&nbsp;<span style="font-size: 18px;color:rgb(255, 192, 0)">{{showPointData.rank}}</span>&nbsp;&nbsp;<span style="font-size: 16px">{{showPointData.name}}</span>
                  <br/>
                  <br/>
                  <span style="vertical-align: middle;font-size: 18px">票房:</span>&nbsp;<span style="vertical-align: middle;font-size: 24px;color:rgb(255, 192, 0);font-weight: bold">{{showPointData.boxoffice}}</span>&nbsp;&nbsp;
                  <span style="vertical-align: middle;font-size: 18px">人次:</span>&nbsp;<span style="vertical-align: middle;font-size: 24px;color:rgb(255, 192, 0);font-weight: bold">{{showPointData.tickets}}</span>&nbsp;&nbsp;
                  <span style="vertical-align: middle;font-size: 18px">场次:</span>&nbsp;<span style="vertical-align: middle;font-size: 24px;color:rgb(255, 192, 0);font-weight: bold">{{showPointData.rounds}}</span>
                </a>
              </figure>
            </div>
          </section>
        </div>
        <HorizontalBarChart :chartData="data1" :isClick="true"></HorizontalBarChart>
        <br/>
      </el-col>
    </el-row>
    <div style="position: absolute;top: 10px;left: 10px;">
      <el-row>
        <el-col :span="24">
          <a href="#" @click="jumpChina"><i style="color: rgb(255, 192, 0);vertical-align: middle;" class="fa fa-arrow-circle-left fa-2x" aria-hidden="true"></i></a>&nbsp;&nbsp;
          <span style="color: #fff;font-size: 30px;font-family: 微软雅黑;margin-top:10px;vertical-align: middle;">{{dateTime}}&nbsp;&nbsp;{{provinceName}}&nbsp;&nbsp;影城票房分布</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="display:inline-block;">
          <span style="font-size: 30px;font-family: 微软雅黑;color:rgb(255, 192, 0);vertical-align: middle;">
            票房:
          </span>
          <span style="font-size: 50px;font-family: 微软雅黑;color:rgb(255, 192, 0);font-weight: bold;vertical-align: middle;">
            {{boxoffice.boxoffice}}
          </span>
          <span style="font-size: 30px;font-family: 微软雅黑;color:rgb(255, 192, 0);vertical-align: middle;">
            人次:
          </span>
          <span style="font-size: 50px;font-family: 微软雅黑;color:rgb(255, 192, 0);font-weight: bold;vertical-align: middle;">
            {{boxoffice.tickets}}
          </span>
          <span style="font-size: 30px;font-family: 微软雅黑;color:rgb(255, 192, 0);vertical-align: middle;">
            场次:
          </span>
          <span style="font-size: 50px;font-family: 微软雅黑;color:rgb(255, 192, 0);font-weight: bold;vertical-align: middle;">
            {{boxoffice.rounds}}
          </span>
        </el-col>
      </el-row>
    </div>
    <div style="position: absolute;top: 4px;right: 10px">
      <img src="~assets/img/cfc_logo.png" height="96px" width="130px" alt="">
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios'
  import Component, {namespace, Getter} from 'class-component'
  import Map2DEchart from '~/components/map2d'
  import HorizontalBarChart from '~components/echarts/horizontalBar'
  import moment from 'moment'
  import provinceNameDesc from '~/components/map2dSimple/province'

  moment.locale('zh-cn')
  const ScreenMapDataGetter = namespace('screenMapData', Getter)

  @Component({
    components: {
      Map2DEchart,
      HorizontalBarChart
    },
    watch: {
      '$route' (to, from) {
        window.location.reload()
      },
      'showPointData': function () {
        this.isBack = !this.isBack
      }
    }
  })
  export default class TestChartManage extends Vue {
    provinceCode = this.$route.query.provinceCode
    provinceKey = this.$route.query.provinceKey
    isBack = false
    @ScreenMapDataGetter provinceMapData
    @ScreenMapDataGetter showPointData
    @ScreenMapDataGetter timer
    @ScreenMapDataGetter autoTimer
    provinces = [] // 用于自动跳转页面获取省份code
    provinceName = this.$route.query.provinceName
    dateTime = moment(Date.now() - 8.64e7).format('YYYY年MM月DD日')
    param = {
      dateTime: moment(Date.now() - 8.64e7).format('YYYYMMDD')
    }
    isAuto = true
    waitSecond = 0
    jumpCinema () {
      let self = this
      let obj = self.provinceMapData.lowRank.find(function (value) {
        if (value.name === self.showPointData.name) {
          return value
        }
      })
      clearInterval()
      obj.provinceName = this.provinceName
      obj.provinceCode = this.provinceCode
      self.$router.push({path: '/chart/filmTicket', query: obj})
    }
    mapDate = Date.now() - 8.64e7
    data1 = null
    boxoffice = {}
    initData () {
      let self = this
      this.provinceCode = this.$route.query.provinceCode
      this.provinceKey = this.$route.query.provinceKey
      console.log('开始发起请求' + moment().format('HH:mm:ss'))
      axios.get('/api/theater/boxofficerankbyarea/' + this.provinceCode + '?date=' + this.param.dateTime).then((res) => {
        if (res.data.success) {
          console.log('请求返回数据' + moment().format('HH:mm:ss'))
          let boxoffice = res.data.data.boxoffice.boxoffice > 100000000 ? (res.data.data.boxoffice.boxoffice / 100000000).toFixed(2) + '亿' : (res.data.data.boxoffice.boxoffice / 10000).toFixed(2) + '万'
          let tickets = res.data.data.boxoffice.tickets > 10000 ? (res.data.data.boxoffice.tickets / 10000).toFixed(2) + '万' : res.data.data.boxoffice.tickets / 1000
          let rounds = res.data.data.boxoffice.rounds > 10000 ? (res.data.data.boxoffice.rounds / 10000).toFixed(0) + '万' : res.data.data.boxoffice.rounds
          self.boxoffice = {
            boxoffice: boxoffice,
            tickets: tickets,
            rounds: rounds
          }
          let line1Data = []
          let cinemas = []
          let color = [
            '#ff6384',
            '#36a2eb',
            '#cc65fe',
            '#ffce56',
            '#83ffdf',
            '#ecff7f',
            '#2c3eff',
            '#a27fff',
            '#ffc57c',
            '#7bc0ff'
          ]
          // line1Data 按照rank排序
          let sortedArr = res.data.data.highRank.sort((a, b) => a.rank > b.rank ? 1 : -1)
          sortedArr.forEach(function (obj, index, array) {
            cinemas.unshift(obj.name)
            let bar = {
              value: obj.boxoffice,
              itemStyle: {
                normal: {
                  color: color[index]
                }
              }
            }
            line1Data.unshift(bar)
          })
          self.$store.dispatch('screenMapData/set_provinceMapdata', res.data.data)
          self.data1 = {
            labels: cinemas,
            series: [
              {
                name: '票房',
                type: 'bar',
                data: line1Data
              }
            ]
          }
        }
      })
      // 当从影城页面跳转回来时 不自动轮转省份了
      if (self.provinceKey !== undefined) {
        let timerId = setInterval(function () {
          if (self.isAuto === false) {
            self.isAuto = true
            self.waitSecond = 0
          } else {
            if (self.waitSecond === 30) {
              // 触发轮转
              let num = parseInt(self.provinceKey) + 1
              if (num > 30) {
                self.jumpChina()
              } else {
                let temp = self.provinces.find(function (value, index, arr) {
                  return value.name === provinceNameDesc[num].name
                })
                self.$router.push({path: '/chart/spreadMap', query: {provinceKey: num, provinceCode: temp.code, provinceName: provinceNameDesc[num].desc}, replace: true})
                // window.location.reload()
              }
              clearInterval(timerId)
            } else {
              self.waitSecond++
            }
          }
        }, 1 * 1000)
        self.$store.dispatch('screenMapData/set_AutoTimer', timerId)
      }
    }
    mounted () {
      let self = this
      if (this.timer !== null) {
        clearInterval(this.timer)
      }
      if (this.autoTimer !== null) {
        clearInterval(this.autoTimer)
      }
      axios.get('/api/dimension/provinces').then((res) => {
        if (res.data.success) {
          self.provinces = res.data.data
        }
      })
      this.initData()
    }
    pickerOptions= {
      disabledDate (time) {
        return time.getTime() > Date.now() - 8.64e7
      }
    }
    jumpChina () {
      this.$router.push({path: '/chart/spreadMapSimple'})
    }
    clickPoint (e) {
      this.isAuto = false
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    /*border: 1px solid #CCC;*/
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
  }

  #card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
  }

  #card.flipped {
    -webkit-transform: translateX( -100% ) rotateY( -180deg );
    -moz-transform: translateX( -100% ) rotateY( -180deg );
    -o-transform: translateX( -100% ) rotateY( -180deg );
    transform: translateX( -100% ) rotateY( -180deg );
  }

  #card figure {
    margin: 0;
    display: block;
    height: 100%;
    width: 100%;
    /*line-height: 260px;*/
    /*color: white;*/
    /*text-align: center;*/
    /*font-weight: bold;*/
    /*font-size: 140px;*/
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  #card .front {
    /*background: red;*/
  }

  #card .back {
    /*background: blue;*/
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
  }
  #flip{margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;background: #fff;}
</style>
